<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Examples - Demo</title>
	<link type="text/css" rel="stylesheet" href="../css/doc.css">
	<link type="text/css" rel="stylesheet" href="../js/lib/rainbow/github.css" />
	<script src="../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../js/marvinjslauncher.js"></script>
	<script type="text/javascript">

		var marvinSketcherInstance;
		var molChangeCounter;

		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				// initalize sketcher
				marvinSketcherInstance = sketcherInstance;
				marvinSketcherInstance.importStructure("mol",caffeineSource);
				marvinSketcherInstance.setDisplaySettings({
					'carbonLabelVisible' : true,
					'atomIndicesVisible' : true
				});

				 
				getSelection = function () {
					$("#atoms").val("");
					$("#bonds").val("");
					var selection = marvinSketcherInstance.getSelection();
					$("#atoms").val(selection['atoms']);
					$("#bonds").val(selection['bonds']);
				};
				
				setSelection = function () {
					marvinSketcherInstance.setSelection({
						'atoms' : $('#atoms').val(),
						'bonds' : $('#bonds').val()
					});
				};
				
				$("#getSelectionButton").on("click", getSelection);
				
				$("#setSelectionButton").on("click", setSelection);
				
				// true to switch on auto retrieve of selection, false to switch it off
				setSelectionChangeListener = function(b) {
					if(b) {
						// add selection change event listener
						marvinSketcherInstance.on("selectionchange", getSelection);
						// disable manual retrieve when selection change event listener is active
						$("#getSelectionButton").attr("disabled", "disabled");
					} else {
						// remove selection change event listener
						marvinSketcherInstance.off("selectionchange", getSelection);
						// enable Get Selection button when selection change event listener is inactive
						$("#getSelectionButton").removeAttr("disabled");
					}
				};

				// when the checkbox is checked in/out by the user
				$("#selectionChangeCheckbox").change(function () {
					setSelectionChangeListener(this.checked);
				});				
				// activate the listener at startup if its checkbox is selected
				if($("#selectionChangeCheckbox").prop('checked')) {
					setSelectionChangeListener(true);
				}
				
				molChangeCounter = 0;
				
				// update counter and display retrieved molecule source
				handleMolChangeEvent = function () {
					molChangeCounter = molChangeCounter+1;
					$("#molChangeCounterDisplay").text(molChangeCounter);
					marvinSketcherInstance.exportStructure("mrv").then(function(molsource) {
						$("#molsource").val(molsource);	
					}, function (error) {});
					
				};

				// true to switch on auto retrieve of the molecule, false to switch it off
				setMolChangeListener = function(b) {
					if(b) {
						// add mol change event listener
						marvinSketcherInstance.on("molchange", handleMolChangeEvent);
					} else {
						// remove mol change event listener
						marvinSketcherInstance.off("molchange", handleMolChangeEvent);
					}
				};

				// when the checkbox is checked in/out by the user
				$("#molChangeCheckbox").change(function () {
					setMolChangeListener(this.checked);
				});
				// activate the listener at startup if its checkbox is selected
				if($("#molChangeCheckbox").prop('checked')) {
					setMolChangeListener(true);
				}
				
				// when reset button is submitted by the user
				$("#resetMolChangeCounterButton").on("click", function() {
					molChangeCounter = 0;
					$("#molChangeCounterDisplay").text(molChangeCounter);
				});

			}, function () {
				alert("Cannot retrieve sketcher instance from iframe");
			});
		});

		var caffeineSource = "\n\n\n"+
			" 14 15  0  0  0  0  0  0  0  0999 V2000\n"+
			"    0.5089    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    1.2234    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    1.2234    7.4191    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.2055    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.9200    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    5.3566    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.2055    7.4191    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    6.1816    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.9200    6.1816    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    8.6566    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.4929    7.0066    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.0080    7.6740    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.0080    6.3391    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.2630    8.4586    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"  1  7  1  0  0  0  0\n"+
			"  8  2  1  0  0  0  0\n"+
			"  1  3  1  0  0  0  0\n"+
			"  2  3  2  0  0  0  0\n"+
			"  7  4  1  0  0  0  0\n"+
			"  4  8  1  0  0  0  0\n"+
			"  4  9  2  0  0  0  0\n"+
			"  7  5  1  0  0  0  0\n"+
			"  8  6  1  0  0  0  0\n"+
			"  1 10  2  0  0  0  0\n"+
			"  3 12  1  0  0  0  0\n"+
			"  2 13  1  0  0  0  0\n"+
			" 13 11  2  0  0  0  0\n"+
			" 12 11  1  0  0  0  0\n"+
			" 12 14  1  0  0  0  0\n"+
			"M  END\n";

	</script>
</head>
<body>
	<h1>Marvin JS Examples - Manage selection</h1>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
	<table>
		<tr>
			<td>
				<div class="resizable">
					<iframe src="../editor.html" id="sketch" class="sketcher-frame"></iframe>
				</div>
			</td>
			<td>
				<div class="molecule-div" align="center">
					<form>
						<p>Atoms: <input type="text" id="atoms" size=80 /></p>
						<p>Bonds: <input type="text" id="bonds" size=80 /></p>
					</form>
				</div>
				<p>Get selection automatically: <input type="checkbox"  style="margin-right: 15px;" id="selectionChangeCheckbox" checked="true"/>
				<input type="button" value="Get Selection" id="getSelectionButton"/>
						<input type="button" value="Set Selection" id="setSelectionButton"/>
				</p>
				<p>Retrieve mol source at mol change: <input type="checkbox"  style="margin-right: 15px;" id="molChangeCheckbox" checked="true"/>
					Mol change counter:</span> <span id="molChangeCounterDisplay">0</span>
					<input type="button" id="resetMolChangeCounterButton" value="Reset counter"/>
				</p>
				<p><textarea id="molsource" rows=16 cols=90></textarea></p> 
			</td>
		</tr>
	</table>
	<p>This example demonstrates how to control selection via JavaScript API and how to monitor the changing of the structure.</p>
	<p>When selection information is retrieved from the sketcher, lists of selected atoms and bonds appear in the following textboxes: <strong>Atoms</strong> and <strong>Bonds</strong>.</p>
	<p>If the checkbox titled as <strong>Get selection automatically</strong> is checked in, lists of selected atoms and bonds are retrieved automatically as the selected context is changed on the canvas.
	When this functionality is disabled, you can retrieve the selection by submitting the <strong>Get selection</strong> button.</p> 
	
	<p>You can edit both the atom list and bond list in the form.
	Atoms can be referred to by their atom index. A bond can be described with the atom index of its nodes.</p>
	<p>With the <strong>Set selection</strong> button, you can update selection in the editor. Those atoms and bonds will be selected that are enumerated on the selection form.</p>
	
	<p>To get the molecule source each time when the drawn structure is changed in the sketcher, check in the <strong>Retrieve mol source at mol change</strong> checkbox. The retrieved data appears in the
	textbox beside the sketcher. You can find a counter next to the checkbox, that indicates how many times the mol change event is invoked. You can reset this counter by submitting the <strong>Reset counter</strong> button.</p>
	
	<p>You can see the code comment below.</p>

	<pre><code data-language="javascript">		var marvinSketcherInstance;
		var molChangeCounter;

		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor(&quot;#sketch&quot;).then(function (sketcherInstance) {
				// initalize sketcher
				marvinSketcherInstance = sketcherInstance;
				marvinSketcherInstance.importStructure("mol",caffeineSource).catch(function(error) {
					alert("Import failed:"+error);
				});
				marvinSketcherInstance.setDisplaySettings({
					'carbonLabelVisible' : true,
					'atomIndicesVisible' : true
				});

				 
				getSelection = function () {
					$(&quot;#atoms&quot;).val(&quot;&quot;);
					$(&quot;#bonds&quot;).val(&quot;&quot;);
					var selection = marvinSketcherInstance.getSelection();
					$(&quot;#atoms&quot;).val(selection['atoms']);
					$(&quot;#bonds&quot;).val(selection['bonds']);
				};
				
				setSelection = function () {
					marvinSketcherInstance.setSelection({
						'atoms' : $('#atoms').val(),
						'bonds' : $('#bonds').val()
					});
				};
				
				$(&quot;#getSelectionButton&quot;).on(&quot;click&quot;, getSelection);
				
				$(&quot;#setSelectionButton&quot;).on(&quot;click&quot;, setSelection);
				
				// true to switch on auto retrieve of selection, false to switch it off
				setSelectionChangeListener = function(b) {
					if(b) {
						// add selection change event listener
						marvinSketcherInstance.on(&quot;selectionchange&quot;, getSelection);
						// disable manual retrieve when selection change event listener is active
						$(&quot;#getSelectionButton&quot;).attr(&quot;disabled&quot;, &quot;disabled&quot;);
					} else {
						// remove selection change event listener					
						marvinSketcherInstance.off(&quot;selectionchange&quot;, getSelection);
						// enable Get Selection button when selection change event listener is inactive
						$(&quot;#getSelectionButton&quot;).removeAttr(&quot;disabled&quot;);
					}
				};

				// when the checkbox is checked in/out by the user
				$(&quot;#selectionChangeCheckbox&quot;).change(function () {
					setSelectionChangeListener(this.checked);
				});				
				// activate the listener at startup if its checkbox is selected
				if($(&quot;#selectionChangeCheckbox&quot;).prop('checked')) {
					setSelectionChangeListener(true);
				}
				
				molChangeCounter = 0;
				
				// update counter and display retrieved molecule source
				handleMolChangeEvent = function () {
					molChangeCounter = molChangeCounter+1;
					$(&quot;#molChangeCounterDisplay&quot;).text(molChangeCounter);
					marvinSketcherInstance.exportStructure(&quot;mrv&quot;).then(function(molsource) {
						$(&quot;#molsource&quot;).val(molsource);	
					}, function () {});
				};
				
				// true to switch on auto retrieve of the molecule, false to switch it off
				setMolChangeListener = function(b) {
					if(b) {
						// add mol change event listener					
						marvinSketcherInstance.on(&quot;molchange&quot;, handleMolChangeEvent);
					} else {
						// remove mol change event listener					
						marvinSketcherInstance.off(&quot;molchange&quot;, handleMolChangeEvent);
					}
				};

				// when the checkbox is checked in/out by the user
				$(&quot;#molChangeCheckbox&quot;).change(function () {
					setMolChangeListener(this.checked);
				});
				// activate the listener at startup if its checkbox is selected
				if($(&quot;#molChangeCheckbox&quot;).prop('checked')) {
					setMolChangeListener(true);
				}
				
				// when reset button is submitted by the user
				$(&quot;#resetMolChangeCounterButton&quot;).on(&quot;click&quot;, function() {
					molChangeCounter = 0;
					$(&quot;#molChangeCounterDisplay&quot;).text(molChangeCounter);
				});

			}, function () {
				alert(&quot;Cannot retrieve sketcher instance from iframe&quot;);
			});
		});

		</code></pre>
		<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
  </body>
</html>
